<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.bson.Document" %>
<%@ page import="com.mongodb.client.*" %>
<%@ page import="java.util.regex.Pattern" %>
<%@ page import="org.bson.conversions.Bson" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.LinkedList" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>统计分析</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<jsp:include page="checkLogin.jsp"></jsp:include>
<%
    
    String url = "mongodb://g08:abc%408@mongo.zhledu.cn:27017/g08";
    MongoClient client = MongoClients.create(url);
    MongoIterable<String> names = client.listDatabaseNames();
    MongoDatabase g08 = client.getDatabase("g08");
    MongoCollection<Document> collection = g08.getCollection("student");
    String sno = request.getParameter("sno");
    Document query = new Document("sno", sno);
    final FindIterable<Document> list = collection.find(query).limit(1);
    Document student = new Document();
    for (Document s : list) {
        student = s;
        break;
    }

%>
<div class="container">
    <center>
        <h1>统计分析</h1>


        <div class="row">
            <div id="sex" style="height: 600px;width: 800px">

            </div>

        </div>
        <div class="row">
            <div id="major" style="height: 400px;width: 600px">

            </div>

        </div>


        <button type="button" class="btn btn-primary glyphicon glyphicon-refresh" id="index">回首页</button>
    </center>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

<script>
    var myChart = echarts.init(document.getElementById('sex'));
    var myChart2 = echarts.init(document.getElementById('major'));
    option = {
        title: {
            text: '学生男女生性别比例图',
            subtext: '数据来源mongo数据库',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '学生性别',
                type: 'pie',
                radius: '80%',
                data: []
            }
        ]
    };

    var option2 = {
        title: {
            text: '学生专业分布图',
            subtext: '数据来源mongo数据库',
            left: 'center'
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                dataView:{show:true}
            },
        },
        xAxis: {
            type: 'category',
            data: [],
        },
        yAxis: {type: 'value'},
        series: [
            {
                data: [],
                type: 'bar',
            },
        ],
    };


    $(function () {
        $.ajax({
            url: "sex-tongji.jsp", success: function (result) {
                option.series[0].data = result;
                myChart.setOption(option);
            }
        });

        $.ajax({
            url: "major-tongji.jsp", success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    option2.xAxis.data.push(result[i].name);
                    option2.series[0].data.push(result[i].value);
                }

                myChart2.setOption(option2);
            }
        });

    });


    $("#index").on("click", function () {
        window.location.href = "index.jsp";
    })
</script>

<%
    client.close();
%>
</body>
</html>
